<template>
  <div class="topbar">
    <nav>
      <ul>
        <li v-for="item in navItem" :key="item.id">
          <a @click.prevent="handlerClick(item.path)"> {{ item.title }}</a>
        </li>
      </ul>
    </nav>

    <div class="search">
      <el-input class="w-50 m-2 el-input" size="large" placeholder="Please Input" :suffix-icon="Search" />
    </div>

    <div class="rigth-entry">
      <ul>
        <li v-for="item in entry" :key="item.id" style="margin: 0 8px;">
          <div style="display: flex; flex-direction: column; text-align: center;">
            <i>👿</i>
            <span> {{ item.title }}</span>
          </div>
        </li>
        <!-- <el-button>🐺投稿</el-button> -->
        <router-link tag="a" target="_blank" to="/contribute">🐺投稿</router-link>
      </ul>
    </div>

  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue"
import { useRouter } from "vue-router";
const router = useRouter()

const navItem = [
  { id: 1, path: "/", title: '首页' },
  { id: 2, path: "/bangumi", title: '番剧' },
  { id: 3, path: "/livestreaming", title: '直播' },
  { id: 4, path: "/cartoon", title: '漫画' },
  { id: 5, path: "/gamehub", title: '游戏中心' },
  { id: 6, path: "/competition", title: '赛事' },
  { id: 7, path: "/activity", title: 'S13' },
  { id: 8, path: "/download", title: '下载客户端' },
]

const entry = [
  { id: 1, path: '', title: '大会员' },
  { id: 2, path: '', title: '消息' },
  { id: 3, path: '', title: '动态' },
  { id: 4, path: '', title: '收藏' },
  { id: 5, path: '', title: '历史创作中心' },
]

const handlerClick = (path: string) => {
  if (path.trim() == '') return
  router.push({ path })
}

</script>

<style lang="less" scoped>
.topbar {
  position: sticky;
  padding: 0 24px;
  height: 64px;
  min-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: aliceblue;

  nav {
    ul li {
      padding: 0 6px;
    }
  }

  .search {
    width: 450px;

    input {
      background: #000;
    }
  }


}

ul {
  display: flex;
}

.box {
  width: 240px;
  height: 360px
}
</style>
